<!-- 告警工作模式 -->
<template>
  <div>
    <div class="bg-white q-py-xs q-px-sm row">
      <span>告警工作模式</span>
      <q-space />
      <q-btn
        class="borderRadius q-mr-sm"
        unelevated
        dense
        size="14px"
        padding="2px 15px"
        color="primary"
        label="新建"
        @click="handlerCreate"
      />
      <q-btn
        class="borderRadius q-mr-sm"
        unelevated
        dense
        size="14px"
        padding="2px 15px"
        color="primary"
        label="编辑"
        @click="handlerUpdate"
      />
      <q-btn
        class="borderRadius"
        unelevated
        dense
        size="14px"
        padding="2px 15px"
        color="primary"
        label="删除"
        @click="handlerDelete"
      />
    </div>
    <q-separator />
    <div class="bg-white q-px-sm warn-mode-container row">
      <span>
        <q-select
          dense
          options-dense
          outlined
          v-model="headerSeach"
          :options="deviceNameOptions"
          class="q-mr-md q-mt-lg"
          style="display: inline-block;"
          @update:model-value="changeAlarmModel"
        />
      </span>
      <q-option-group
        v-model="group"
        :options="options"
        inline
        color="primary"
        class="q-mr-lg q-mt-lg"
        @update:model-value="changerRadio"
      />
      <span class="time-class q-mt-lg q-mr-sm">
        开始时间
        <span>
          <q-input :disable="group !== '时间区间'" outlined dense v-model="startAndEndTime.start_time">
            <template v-slot:append>
              <q-icon name="access_time" class="cursor-pointer">
                <q-popup-proxy transition-show="scale" transition-hide="scale">
                  <q-time v-model="startAndEndTime.start_time" mask="HH:mm:ss" format24h with-seconds>
                    <div class="row items-center justify-end">
                      <q-btn v-close-popup label="取消" color="primary" flat></q-btn>
                    </div>
                  </q-time>
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>
        </span>
      </span>
      <span class="time-class q-mt-lg">
        结束时间
        <span>
          <q-input
            :disable="group !== '时间区间' || !startAndEndTime.start_time"
            outlined
            dense
            v-model="startAndEndTime.stop_time"
            @blur="changeTime"
          >
            <template v-slot:append>
              <q-icon name="access_time" class="cursor-pointer">
                <q-popup-proxy transition-show="scale" transition-hide="scale">
                  <q-time v-model="startAndEndTime.stop_time" mask="HH:mm:ss" format24h with-seconds>
                    <div class="row items-center justify-end">
                      <q-btn v-close-popup label="取消" color="primary" flat></q-btn>
                    </div>
                  </q-time>
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>
        </span>
      </span>
    </div>
      <!-- 添加/编辑 弹出对话框 -->
    <q-dialog v-model="isAddOrUpdate" persistent>
      <q-card class="card-style">
          <!-- 对话框的头部 -->
        <q-card-section class="row items-center q-pb-none">
          <div class="text-h6">{{ titleType[dialogTitle] }}</div>
          <q-space />
          <q-btn icon="close" flat round dense @click="isAddOrUpdate = false"></q-btn>
        </q-card-section>
          <!-- 对话框的主体-->
        <q-card-section>
          <q-form ref="assetForm" class="q-pa-sm dialog-form-container">
            <ul>
              <li>
                <span>
                  <span style="color: red;">*</span>
                  模式名称
                </span>
                <span>
                  <q-input
                    outlined
                    dense
                    v-model="creatUpdateQuery.mode_name"
                    :rules="[val => val && val.length > 0 || '请输入模式名称']"
                  />
                </span>
              </li>
              <li v-show="dialogTitle === 'create'">
                <q-option-group
                  v-model="creatUpdateQuery.is_varied"
                  :options="options"
                  inline
                  color="primary"
                  class="q-mr-lg q-mt-lg"
                />
              </li>
              <li v-show="dialogTitle === 'create' && creatUpdateQuery.is_varied==='时间区间'">
                <span>
                  开始时间
                </span>
                <span>
                  <q-input outlined dense v-model="creatUpdateQuery.start_time">
                    <template v-slot:append>
                      <q-icon name="access_time" class="cursor-pointer">
                        <q-popup-proxy transition-show="scale" transition-hide="scale">
                          <q-time v-model="creatUpdateQuery.start_time" mask="HH:mm:ss" format24h with-seconds>
                            <div class="row items-center justify-end">
                              <q-btn v-close-popup label="取消" color="primary" flat></q-btn>
                            </div>
                          </q-time>
                        </q-popup-proxy>
                      </q-icon>
                    </template>
                  </q-input>
                </span>
              </li>
              <li v-show="dialogTitle === 'create' && creatUpdateQuery.is_varied==='时间区间'">
                <span>
                  结束时间
                </span>
                <span>
                  <q-input outlined dense v-model="creatUpdateQuery.stop_time">
                    <template v-slot:append>
                      <q-icon name="access_time" class="cursor-pointer">
                        <q-popup-proxy transition-show="scale" transition-hide="scale">
                          <q-time v-model="creatUpdateQuery.stop_time" mask="HH:mm:ss" format24h with-seconds>
                            <div class="row items-center justify-end">
                              <q-btn v-close-popup label="取消" color="primary" flat></q-btn>
                            </div>
                          </q-time>
                        </q-popup-proxy>
                      </q-icon>
                    </template>
                  </q-input>
                </span>
              </li>
            </ul>
          </q-form>
        </q-card-section>
          <!-- 对话框的底部 -->
        <q-card-actions align="right">
          <q-btn unelevated label="取消" type="reset" style="color: #686868;" outline @click="isAddOrUpdate = false" />
          <q-btn unelevated label="确定" type="submit" color="accent" @click="dialogTitle==='create'?sendCreateInfo():sendUpdateInfo()" />
        </q-card-actions>
      </q-card>
    </q-dialog>
    <DeleteDialog :isShowDelete="isShowDelete" :tipInfo="'确定删除吗？'" @closeDeleteDialog="closeDeleteDialog" @confirmDelete="confirmDelete" />
  </div>

</template>

<script>
import { getWarnMode, upDateWarnMode, setWarnMode, delWarnMode } from 'src/api/systemtWarning'
import DeleteDialog from 'src/components/deleteDialog/index'
export default {
  data () {
    return {
      headerSeach: '',
      deviceNameOptions: [],
      group: '',
      options: [
        { label: '禁止通知', value: '禁止通知' },
        { label: '全天', value: '全天' },
        { label: '时间区间', value: '时间区间' },
      ],
      startAndEndTime: {
        start_time: '',
        stop_time: ''
      },
      creatUpdateQuery: {
        mode_name: '',
        is_varied: undefined,
        is_disable: false,
        is_all_day: false,
        start_time: null,
        stop_time: null
      },
      is_area_time: false,
      isAddOrUpdate: false,
      dialogTitle: 'create',
      titleType: {
        create: '新建告警工作模式',
        update: '编辑告警工作模式',
      },
      isShowDelete: false
    };
  },

  components: {
    DeleteDialog
  },

  computed: {},

  mounted() {
    this.getModeAll()
  },

  methods: {
    /**
     * 获取工作模式下拉框内容
     */
    getModeAll() {
      this.resetinfo()
      getWarnMode().then(res => {
        const { status, data } = res
        if (status === 200) {
          if (data && Array.isArray(data)) {
            this.deviceNameOptions = []
            if (data.length === 0) {
              this.resetinfo()
              return
            }
            data.forEach((item, index) => {
              const { id, mode_name, is_disable, is_all_day, start_time, stop_time, is_select } = item
              this.deviceNameOptions.push({
                id,
                value: mode_name,
                label: mode_name,
                mode_name,
                is_disable,
                is_all_day,
                start_time,
                stop_time,
                is_select
              })
              if (is_select) {
                this.headerSeach = this.deviceNameOptions[index]
                this.matchMode(item)
                this.startAndEndTime.start_time = start_time
                this.startAndEndTime.stop_time = stop_time
              }
            })
            if (data.every(item => !item.is_select)) {
              this.headerSeach = this.deviceNameOptions[0]
              this.matchMode(this.deviceNameOptions[0])
              this.startAndEndTime.start_time = this.deviceNameOptions[0].start_time
              this.startAndEndTime.stop_time = this.deviceNameOptions[0].stop_time
            }
          } else {
            const { id, mode_name, is_disable, is_all_day, start_time, stop_time, is_select } = data
            this.headerSeach = {
              id,
              value: mode_name,
              label: mode_name,
              mode_name,
              is_disable,
              is_all_day,
              start_time,
              stop_time,
              is_select
            }
            this.matchMode(data)
            this.startAndEndTime.start_time = data.start_time
            this.startAndEndTime.stop_time = data.stop_time
          }

        }
      })
    },
    /**
     * 重置信息
     */
    resetinfo() {
      this.headerSeach = ''
      this.group = ''
      this.startAndEndTime.start_time = null
      this.startAndEndTime.stop_time = null
    },
    /**
     * 匹配模式
     */
    matchMode(valMold) {
      if (valMold.is_disable) this.group = '禁止通知'
      if (valMold.is_all_day) this.group = '全天'
      if (valMold.start_time || valMold.stop_time) this.group = '时间区间'
    },
    /**
     * 重置添加参数
     */
    resetQuery() {
      this.creatUpdateQuery = {
        mode_name: '',
        is_disable: false,
        is_all_day: false,
        start_time: null,
        stop_time: null
      }
      this.is_area_time = false
    },
    /**
     * 打开添加弹框
     */
    handlerCreate() {
      this.dialogTitle = 'create'
      this.resetQuery()
      this.isAddOrUpdate = true
      this.$nextTick(res => {
        this.$refs.assetForm.resetValidation()
      })
    },
    // 添加函数
    sendCreateInfo() {
      this.$refs.assetForm.validate().then(res => {
        if (this.creatUpdateQuery.is_varied === '全天') {
          this.creatUpdateQuery.is_all_day = true
        }
        if (this.creatUpdateQuery.is_varied === '禁止通知') {
          this.creatUpdateQuery.is_disable = true
        }
        delete this.creatUpdateQuery.is_varied
        upDateWarnMode(this.creatUpdateQuery).then(res => {
          const { status, data } = res
          if (status === 200) {
            this.$q.notify({
              type: 'positive',
              position: 'top',
              message: '新建成功！'
            })
            this.getModeAll()
            this.isAddOrUpdate = false
          }
        })
      })
    },
    // 设置时间
    changeTime(val) {
      let _query = {}
      _query.is_disable = false
      _query.is_all_day = false
      _query.start_time = this.startAndEndTime.start_time
      _query.stop_time = this.startAndEndTime.stop_time
      setWarnMode(this.headerSeach.id, _query).then(res => {
        const { status, request_data } = res
        if (status === 200) {
          this.getModeAll()
        }
      })
    },
    // 设置单选
    changerRadio(val) {
      if (!val || val === '时间区间') return
      let _query = {}
      if (val === '全天') {
        _query.is_disable = false
        _query.is_all_day = true
        _query.start_time = null
        _query.stop_time = null
      }
      if (val === '禁止通知') {
        _query.is_disable = true
        _query.is_all_day = false
        _query.start_time = null
        _query.stop_time = null
      }
      setWarnMode(this.headerSeach.id, _query).then(res => {
        const { status, request_data } = res
        if (status === 200) {
          this.getModeAll()
        }
      })
    },
    // 切换告警工作模式下拉框
    changeAlarmModel(val) {
      if (!val || !val.id) return
      setWarnMode(val.id, { is_select: true }).then(res => {
        const { status, request_data } = res
        if (status === 200) {
          this.getModeAll()
        }
      })
    },
    // 编辑告警模式
    handlerUpdate() {
      this.dialogTitle = 'update'
      this.isAddOrUpdate = true
      this.creatUpdateQuery.mode_name = this.headerSeach.mode_name
      this.$nextTick(res => {
        this.$refs.assetForm.resetValidation()
      })
    },
    sendUpdateInfo() {
      setWarnMode(this.headerSeach.id, {mode_name: this.creatUpdateQuery.mode_name}).then(res => {
        const { status, request_data } = res
        if (status === 200) {
          this.$q.notify({
            type: 'positive',
            position: 'top',
            message: '修改成功！'
          })
          this.getModeAll()
          this.isAddOrUpdate = false
        }
      })
    },

    /**
     * 打开是否删除提示框
     */
    handlerDelete() {
      this.isShowDelete = true
    },
    /**
     * 确定删除
     */
    confirmDelete() {
      if (!this.headerSeach.id) {
        this.$q.notify({
          type: 'warning',
          position: 'top',
          message: 'ID不存在！'
        })
        return
      }
      delWarnMode(this.headerSeach.id).then(res => {
        const {status, msg} = res
        if (status === 200) {
          this.isShowDelete = false
          this.getModeAll()
          this.$q.notify({
            type: 'positive',
            position: 'top',
            message: `删除成功！`
          })
        } else {
          this.$q.notify({
            type: 'positive',
            position: 'top',
            message: msg
          })
        }
      })
    },
    /**
     * 关闭删除提示框
     */
    closeDeleteDialog() {
      this.isShowDelete = false
    },
  }
}

</script>
<style lang='scss' scoped>
.warn-mode-container {
  height: 90px;
  overflow: auto;
}
.time-class {
  >span {
    display: inline-block;
    vertical-align: middle;
    width: 160px;
  }
}
// 弹出的对话框样式
.dialog-form-container {
  ul {
    li {
      height: 42px;
      line-height: 42px;
      white-space: nowrap;
      margin-bottom: 30px;
      >span {
        &:first-child {
          display: inline-block;
          width: 150px;
          margin-right: 5px;
        }
        &:last-child {
          display: inline-block;
          width: 200px;
          >.q-input {
            width: 200px;
          }
        }
      }
    }
  }
}
</style>
